<template>
  <div class="mainbody">
    <dv-loading v-show="runFlag !== 0" class="loading">Loading...</dv-loading>
    <div class="container">
      <!-- <div class="go-home" @click="goHomepage">返回</div> -->
      <MainTitle :main-title="mainTitle" />
      <div class="tag-group">
        <div class="area">武汉市东湖高新区</div>

        <div class="date">{{ date }}</div>
      </div>
      <div class="view-frame">
        <div class="weather_group">
          <div class="weather_item">
            <img v-if="weather === 'rain'" src="~@assets/report/rain.png" alt />
            <img
              v-if="weather === 'cloudy'"
              src="~@assets/report/cloudy.png"
              alt
            />
            <img
              v-if="weather === 'sunny'"
              src="~@assets/report/sunny.png"
              alt
            />
            <span>{{ time }}</span>
            <select v-model="weather">
              <option value="rain">雨</option>
              <option value="cloudy">多云</option>
              <option value="sunny">晴</option>
            </select>
          </div>
          <div class="weather_item">
            <img src="~@assets/report/温度.png" />
            <span>
              温度：{{
                csotData.temperature && csotData.temperature.toFixed(2)
              }}
              ℃
            </span>
          </div>
          <div class="weather_item">
            <img src="~@assets/report/hanshi.png" alt />
            <span>
              焓值：{{ csotData.enthalpy && csotData.enthalpy.toFixed(2) }}
              kj/kg
            </span>
          </div>
          <div class="weather_item">
            <img src="~@assets/report/jiejingshi.png" alt />
            <div>
              <select v-model="cleanRoom" @change="selectPoint">
                <option value="1">t4 FAB2</option>
                <option value="2">t4 MOD3</option>
                <option value="3">MC栋</option>
              </select>
              <div>
                <span>
                  温度：{{
                    humAndTemp.temperature && humAndTemp.temperature.toFixed(2)
                  }}
                  ℃
                </span>
                <span>
                  湿度：{{
                    humAndTemp.humidity && humAndTemp.humidity.toFixed(2)
                  }}%
                </span>
              </div>
            </div>
          </div>
          <div class="weather_item">
            <img src="~@assets/report/t6.png" alt />
            <span>
              <div>洁净室洁净度</div>
              一级洁净
            </span>
          </div>
        </div>

        <div class="data_group">
          <div class="data_column">
            <el-carousel :interval="5200" class="data_row co2" arrow="never">
              <el-carousel-item>
                <div class="data-value">
                  {{ daydata || daydata === 0 ? daydata.toFixed(0) : "-" }}
                </div>
                <div class="data-name">日耗电量（kWh）</div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="data-value">
                  {{ waterdata }}
                </div>
                <div class="data-name">日耗水量（t）</div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="data-value">
                  {{
                    energyData.c || energyData.c === 0
                      ? parseInt(energyData.c * 0.785)
                      : "-"
                  }}
                </div>

                <div class="data-name">日碳排放当量（t）</div>
              </el-carousel-item>
            </el-carousel>
            <div class="data_row load">
              <div class="data-value">
                <!-- {{ elecDayValue }} -->
                {{
                  elecDayValue || elecDayValue === 0
                    ? elecDayValue.toFixed(0)
                    : "-"
                }}
              </div>
              <div class="data-name">实时负荷（MW）</div>
            </div>
          </div>
          <div class="data_column">
            <div class="data_row load">
              <div class="data-value">
                {{
                  energyData.water1 || energyData.water1 === 0
                    ? parseInt(energyData.water1)
                    : 11232
                }}/{{
                  energyData.water2 || energyData.water2 === 0
                    ? parseInt(energyData.water2)
                    : 42445
                }}
              </div>
              <div class="data-name">面板厂生产日/月能效</div>
            </div>

            <el-carousel :interval="4800" class="data_row co2" arrow="never">
              <el-carousel-item>
                <div class="data-value">
                  {{
                    energyData.fw || energyData.fw === 0
                      ? parseInt(energyData.fw)
                      : "-"
                  }}
                </div>
                <div class="data-name">日废水排放量（m³）</div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="data-value">
                  {{
                    energyData.fw1 || energyData.fw1 === 0
                      ? parseInt(energyData.fw1)
                      : 1236.65
                  }}
                </div>
                <div class="data-name">废水排污权累计</div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="data_column">
            <el-carousel :interval="6000" class="data_row co2" arrow="never">
              <el-carousel-item>
                <div class="data-value">
                  {{
                    energyData.c1 || energyData.c1 === 0
                      ? parseInt(energyData.c1 * 0.785)
                      : 3245.21
                  }}
                </div>
                <div class="data-name">太阳能发电(lWh)</div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="data-value">
                  {{
                    energyData.c2 || energyData.c2 === 0
                      ? parseInt(energyData.c2 * 0.785)
                      : 2333.32
                  }}
                </div>
                <div class="data-name">充电桩用电(kWh)</div>
              </el-carousel-item>
            </el-carousel>
            <div class="data_row waste-water">
              <div class="data-value">
                {{ pdata }}
              </div>
              <div class="data-name">建筑能效(kWh/㎡)</div>
            </div>
          </div>
          <div class="data_column auth" @click="open()" />
        </div>

        <div class="charts_group">
          <chartItem
            :options1="elecOptionsWeek"
            :options2="elecOptionsMonth"
            :title="'历史耗电量'"
          />
          <chartItem
            :options1="waterOptionsWeek"
            :options2="waterOptionsMonth"
            :title="'历史耗水量（手动录入）'"
          />
          <chartItem
            :options1="gasOptionsWeek"
            :options2="gasOptionsMonth"
            :title="'历史耗气量（手动录入）'"
          />
          <chartItem
            :options1="singleOptionsWeek"
            :options2="singleOptionsMonth"
            :title="'单片能耗'"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
Object.assign(Date.prototype, {
  switch(time) {
    const date = {
      yy: this.getFullYear(),
      MM: this.getMonth() + 1,
      dd: this.getDate(),
      hh: this.getHours(),
      mm: this.getMinutes(),
      ss: this.getSeconds(),
    };
    if (/(y+)/i.test(time)) {
      time = time.replace(
        RegExp.$1,
        (this.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    }
    Object.keys(date).forEach(function (i) {
      if (new RegExp("(" + i + ")").test(time)) {
        if (RegExp.$1.length === 2) {
          date[i] < 10 ? (date[i] = "0" + date[i]) : date[i];
        }
        time = time.replace(RegExp.$1, date[i]);
      }
    });
    return time;
  },
});
import { mapState } from "vuex";
import "element-ui/lib/theme-chalk/index.css";
import barOptions from "./json/barOptions.json";
import areaOptions from "./json/areaOptions.json";
import lineOptions1 from "./json/lineOptions1.json";
import lineOptions2 from "./json/lineOptions2.json";
import apis from "../../../../api/api.js";
export default {
  components: {
    MainTitle: () => import("@/components/MainTitle.vue"),
    chartItem: () => import("./module/chartItem.vue"),
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      runFlag: 0,
      date: new Date().toLocaleDateString(),
      barOptions: barOptions,
      areaOptions: areaOptions,
      lineOptions1: lineOptions1,
      lineOptions2: lineOptions2,
      cleanRoom: "1",
      weather: "sunny",
      time: new Date().toLocaleTimeString(),
      elecOptionsWeek: {},
      elecOptionsMonth: {},
      waterOptionsWeek: {},
      waterOptionsMonth: {},
      gasOptionsWeek: {},
      gasOptionsMonth: {},
      singleOptionsWeek: {}, //单片能耗周
      singleOptionsMonth: {}, //单片能耗月
      energyData: {},
      //日耗电量
      elecDay: null,
      elecDayValue: null,
      csotData: {},
      humAndT: [],
      humAndTemp: {},
      daydata: "", //日耗电量
      dayWater: "", //日耗水量
      dayGas: "", //日耗气量
      dayCc: "", //日碳排放
      dayWasteWater: "", //日废水

      //能耗
      pdata: "",
      waterdata: "",
    };
  },
  computed: {
    mainTitle() {
      return this.title;
    },
    ...mapState({
      service: (state) => state.service,
      webModel: (state) => state.authentication.webModel,
      treeTemplate: (state) => state.component.treeTemplate,
    }),
    // humAndTemp() {
    //   if (this.humAndT) {
    //     const e = this.humAndT.filter(e => e.id === this.cleanRoom);
    //     const hum = e.find(i => i.tag_id === "hum");
    //     const t = e.find(i => i.tag_id === "t");
    //     return {
    //       hum:
    //         hum && (hum.value || hum.value === 0) ? hum.value.toFixed(2) : "-",
    //       t: t && (t.value || t.value === 0) ? t.value.toFixed(2) : "-"
    //     };
    //   } else {
    //     return {
    //       hum: "-",
    //       t: "-"
    //     };
    //   }
    // }
  },
  created() {
    this.init();
    this.searchInfoValueBylocation1(this.cleanRoom); //获取温度和焓值
    // console.log(apis, "0000000000000000000000000");
    setInterval(() => {
      // that.runFlag = 0;
      window.location.reload();
    }, 36000000);
  },
  mounted() {
    const _this = this;
    this.timer = setInterval(() => {
      _this.time = new Date().switch("hh:mm:ss");
      _this.date = new Date().toLocaleDateString();
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    open() {
      this.$router.push({ name: "Authentication" });
    },
    goHomepage() {
      window.location.href = "http://10.109.88.193:81/#/home";
      //  window.location.href = "http://192.168.65.15:8002/#/home";
    },
    selectPoint() {
      this.searchInfoValueBylocation1(this.cleanRoom); //获取温度和焓值
    },
    async init() {
      this.getFirstScreenSecondThirdRowData(); //3194获取 碳c，废水，气，负荷，水量
      this.getFirstScreenLastWeekC(); //全厂耗电量周 3180
      this.getFirstScreenMonthlyC(); //全厂耗电量月 3182
      this.getFirstScreenLastWeekWater(); //历史耗水量周 3184
      this.getFirstScreenMonthlyWater(); //历史耗水量月 3188
      this.getFirstScreenLastWeekGas(); //历史耗气量周 3186
      this.getFirstScreenMonthlyGas(); //历史耗气量月 3190
      this.test8003(); //日耗电量
      this.searchCetNowValuedata(); //实时负荷
      this.getFirstScreenLastWeekYield(); //单片能耗周 3196
      this.getFirstScreenMonthlyYield(); //单片能耗月 3198
      this.searchEnthalpyAndTemperature(); //获取温度和焓值
      this.queryWacerAndElec();
    },
    async searchInfoValueBylocation1(data) {
      try {
        this.runFlag = 1;
        const res = await apis.searchInfoValueBylocation(data);
        // console.log(res, "ok");
        this.humAndTemp = res.data.data;
        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "请求失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    async searchEnthalpyAndTemperature() {
      try {
        this.runFlag = 1;
        const EnthalpyAndTemperature =
          await this.service.searchEnthalpyAndTemperature();
        this.csotData = EnthalpyAndTemperature.data;
        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "请求失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    //历史耗电量周图表
    async getFirstScreenLastWeekC() {
      try {
        this.runFlag = 1;
        const result1 = await this.service.search3180();
        // console.log(result1,'历史耗电量周')
        if (
          result1 &&
          result1.data &&
          result1.data.time &&
          result1.data.value
        ) {
          this.elecOptionsWeek = {
            ...this.lineOptions1,
            xAxis: {
              ...this.lineOptions1.xAxis,
              data: result1.data.time,
            },
            series: [
              { ...this.lineOptions1.series[0], data: result1.data.value },
            ],
          };
        } else {
          this.elecOptionsWeek = this.lineOptions1;
        }

        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "请求失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    //历史耗电量月图表
    async getFirstScreenMonthlyC() {
      try {
        this.runFlag = 1;
        const result2 = await this.service.search3182();
        // console.log(result2,'历史耗电量月')
        if (
          result2 &&
          result2.data &&
          result2.data.time &&
          result2.data.value
        ) {
          this.elecOptionsMonth = {
            ...this.lineOptions1,
            xAxis: { ...this.lineOptions1.xAxis, data: result2.data.time },
            series: [
              { ...this.lineOptions1.series[0], data: result2.data.value },
            ],
          };
        } else {
          this.elecOptionsMonth = this.lineOptions1;
        }

        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "请求失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    //历史耗水量周图表
    async getFirstScreenLastWeekWater() {
      try {
        this.runFlag = 1;
        // const result3 = await this.service.search3184();
        const result3 = await apis.shuidataweek();

        if (
          result3 &&
          result3.data.content &&
          result3.data.content.time &&
          result3.data.content.value &&
          result3.data.content.time
        ) {
          this.waterOptionsWeek = {
            ...this.barOptions,
            xAxis: {
              ...this.barOptions.xAxis,
              data: result3.data.content.time,
            },
            series: [
              {
                ...this.barOptions.series[0],
                data: result3.data.content.value,
              },
            ],
          };
        } else {
          this.waterOptionsWeek = this.barOptions;
        }
        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "请求失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    //历史耗水量月图表
    async getFirstScreenMonthlyWater() {
      try {
        this.runFlag = 1;
        // const result4 = await this.service.search3188();
        const result4 = await apis.shuidatamonth();
        if (
          result4 &&
          result4.data.content &&
          result4.data.content.time &&
          result4.data.content.value
        ) {
          // console.log( result4.data.content.value, "耗水量--------------------");
          this.waterOptionsMonth = {
            ...this.barOptions,
            xAxis: {
              ...this.barOptions.xAxis,
              data: result4.data.content.time,
            },
            series: [
              {
                ...this.barOptions.series[0],
                data: result4.data.content.value,
              },
            ],
          };
        } else {
          this.waterOptionsMonth = this.barOptions;
        }
        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "请求失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    //历史耗气量周图表
    async getFirstScreenLastWeekGas() {
      try {
        this.runFlag = 1;
        // const result5 = await this.service.search3186();
        const result5 = await apis.qidataweek();
        // console.log(result5, "qidataweek");
        if (
          result5 &&
          result5.data.content &&
          result5.data.content.time &&
          result5.data.content.value
        ) {
          this.gasOptionsWeek = {
            ...this.areaOptions,
            xAxis: {
              ...this.areaOptions.xAxis,
              data: result5.data.content.time,
            },
            series: [
              {
                ...this.areaOptions.series[0],
                data: result5.data.content.value,
              },
            ],
          };
        } else {
          this.gasOptionsWeek = this.areaOptions;
        }
        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "请求失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    //历史耗气量月图表
    async getFirstScreenMonthlyGas() {
      try {
        this.runFlag = 1;
        // const result6 = await this.service.search3190();
        const result6 = await apis.qidatamonth();
        // console.log(result6, "历史耗水量qidatamonth");
        if (
          result6 &&
          result6.data.content &&
          result6.data.content.time &&
          result6.data.content.value
        ) {
          this.gasOptionsMonth = {
            ...this.areaOptions,
            xAxis: {
              ...this.areaOptions.xAxis,
              data: result6.data.content.time,
            },
            series: [
              {
                ...this.areaOptions.series[0],
                data: result6.data.content.value,
              },
            ],
          };
        } else {
          this.gasOptionsMonth = this.areaOptions;
        }
        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "请求失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    //单片能耗周图表
    async getFirstScreenLastWeekYield() {
      // const result9 = await apis.queryYiledMonth();
      // console.log(result9, "单片能耗周图表");
      try {
        this.runFlag = 1;
        // const result9 = await this.service.search3196();
        const result9 = await apis.queryYiledDay();
        if (result9 && result9.data && result9.data.data.value) {
          // console.log(result9.data.data, "单片能耗周图表");
          const arr1 = [];
          result9.data.data.value.forEach((item, index) => {
            arr1.push(item);
          });
          this.singleOptionsWeek = {
            ...this.lineOptions2,
            xAxis: {
              ...this.lineOptions2.xAxis,
              data: result9.data.data.time,
            },
            series: [{ ...this.lineOptions2.series[0], data: arr1 }],
          };
        } else {
          this.singleOptionsWeek = this.lineOptions2;
        }

        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "请求失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    //单片能耗月图表
    async getFirstScreenMonthlyYield() {
      try {
        this.runFlag = 1;
        // search3198
        // const result10 = await this.service.search3198();
        const result10a = await apis.queryYiledMonth();
        const result10 = result10a.data;
        // console.log(result10, "单片能耗月图表111111111111111111111");
        if (result10 && result10.data && result10.data.value) {
          const arr2 = [];
          result10.data.value.forEach((item, index) => {
            // const i = (result2.data.value[index] / item).toFixed(2);
            arr2.push(item);
          });
          this.singleOptionsMonth = {
            ...this.lineOptions2,
            xAxis: {
              ...this.lineOptions2.xAxis,
              data: result10.data.time,
            },
            series: [{ ...this.lineOptions2.series[0], data: arr2 }],
          };
        } else {
          this.singleOptionsMonth = this.lineOptions2;
        }

        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "请求失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    //3194获取 碳c，废水，气，负荷，水量
    async getFirstScreenSecondThirdRowData() {
      try {
        this.runFlag = 1;
        // const result8 = await this.service.getFirstScreenSecondThirdRowData();
        const result8 = await this.service.search3194();

        // console.log(result8, "asdasdasd");

        // this.energyData = result8.data[0].data;
        // console.log(result8, 9876);
        this.energyData = result8.data;
        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "请求失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    //大屏 实时负荷
    async searchCetNowValuedata() {
      try {
        this.runFlag = 1;
        const result7 = await this.service.searchCetNowValue();

        this.elecDayValue = result7.data;
        // console.log(this.elecDayValue, "实时数据");
        this.runFlag = 0;
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "请求实时数据失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    //日耗电量
    async test8003() {
      try {
        this.runFlag = 1;
        const result = await this.service.test8003({});
        // console.log(result, "12345");
        // this.runFlag = 0;
        // this.elecDay = result[0].data[0].time;
        this.daydata = result.value;
        // this.elecDayValue = Math.round(result.value);
        // console.log(elecDayValue, elecDay, "日耗电量");
      } catch (e) {
        this.runFlag = 0;
        this.$notify({
          title: "日用电量数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    //水与建筑能耗
    async queryWacerAndElec() {
      const queryWaterAndElecdata = await apis.queryWaterAndElec();
      // console.log(queryWaterAndElecdata, "水与建筑能耗");
      this.pdata = queryWaterAndElecdata.data.data.p;
      this.waterdata = queryWaterAndElecdata.data.data.water;
      // console.log(this.pdata, this.waterdata, "水与建筑能耗");
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-carousel__item {
  text-align: center;
  padding-top: 52px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  // background-color: #176feb;
}
/deep/ .el-carousel__indicators .el-carousel__indicators--horizontal {
  display: none !important;
}
/deep/ .el-carousel__container {
  width: 100%;
  height: 100%;
  margin: 0;
}
/deep/ .el-carousel__item:nth-child(2n) {
  // background-color: #176feb;
  width: 100%;
  height: 100%;
}

/deep/ .el-carousel__item:nth-child(2n + 1) {
  // background-color: #d3dce6;
  width: 100%;
  height: 100%;
}
.go-home {
  width: 66px;
  height: 33px;
  position: absolute;
  top: 32px;
  right: 228px;
  text-align: center;
  line-height: 33px;
  border-radius: 4px;
  color: #fff;
  background: #0b3162;
  cursor: pointer;
  z-index: 22;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.7);
  z-index: 9;
}
.mainbody {
  height: 100vh;
  background: url("~@assets/report/leftbg.jpg") no-repeat;
  background-size: 100% 100%;
}
.container {
  position: relative;
  width: 95%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
.view-frame {
  display: flex;
  flex-flow: column nowrap;
  height: 85%;
  justify-content: space-between;
  margin-top: 3rem;
  overflow-y: scroll;
  // margin-top: 1rem;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    // 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {
    // 兼容Opera
    display: none;
  }
  scrollbar-width: none; // 兼容Firefox
  -ms-overflow-style: none; // 兼容edge
}
.tag-group {
  width: 100%;
  height: 3rem;
  position: absolute;
  top: 3%;
  display: flex;
  justify-content: space-between;
}

.tag-group div {
  position: relative;
  font-size: 1.6rem;
  width: 15rem;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  z-index: 0;
  color: #00f4ff;
}
.tag-group .date::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  background: #0b3162;
  z-index: -1;
  transform: skewX(-45deg);
}
.tag-group .area::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  background: #0b3162;
  z-index: -1;
  transform: skewX(45deg);
}
.weather_group,
.data_group,
.charts_group {
  display: flex;
  justify-content: space-between;
}
.weather_item,
.data_column,
.chart_item {
  flex: 1;
}
.weather_group {
  flex-basis: 25%;
  background: url("~@assets/report/bj752.png") no-repeat;
  background-size: 100% 100%;
  align-items: center;
}
.weather_item {
  height: 60%;
  border-left: 1px solid rgba(230, 230, 230, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.weather_group .weather_item:first-child {
  border-left: none;
}
.weather_item img {
  height: 100%;
}
.weather_item > span {
  margin-left: 1rem;
  font-size: 2.3rem;
  font-weight: 600;
}
.weather_item select {
  background: transparent;
  color: #fff;
  margin-left: 1rem;
  font-size: 1.8rem;
  font-weight: 600;
  border: none;
}
.weather_item option {
  background: transparent;
  color: rgb(15, 23, 139);
  margin-left: 1rem;
  font-size: 1.8rem;
}
// .weather_item>div{
//   display: flex;
//   flex-flow: column;
// }
.weather_item div div {
  margin-top: 1rem;
  padding-left: 3px;
}
.weather_item div span {
  font-size: 1.6rem;
  color: #ddd;
  margin-left: 1rem;
}
.data_group {
  flex-basis: 50%;
  margin: 2rem 0;
}
.data_column {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  flex: 1;
  height: 100%;
}

.elec,
.load,
.gas,
.waste-water {
  background: url("~@assets/report/002.png") no-repeat 55% bottom;
  background-size: auto 90%;
}
.water,
.co2 {
  background: url("~@assets/report/001.png") no-repeat center bottom;
  background-size: auto 70%;
}
.auth {
  background: url("~@assets/report/bjrz.png") no-repeat center bottom;
  background-size: auto 90%;
  cursor: pointer;
}
.data_row {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 100%;
  padding-bottom: 4rem;
}
.data-value {
  font-size: 2.6rem;
  line-height: 3.5rem;
  font-weight: 600;
  color: #fff;
}
.data-name {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 600;
  color: #fff;
}
.charts_group {
  flex-basis: 30%;
}
</style>
